<template>
	<view>

		<!-- 热榜商品 -->
		<view class="hot-goods flex justify-start align-center">
			<view class="goods-pic flex align-center justify-center">
				<image class="pic" mode="aspectFill" src="/static/test/rb.jpeg"></image>
			</view>
			<view class="goods-text relative">
				<view class="text1 over-text2">
					这个是拼团商品的标题，需要测试一下长度之类的东西还有自提大小之类的
				</view>
				<view class="text2 flex align-center justify-between">
					<text class="item1">
						规格:guige1
					</text>
					<text class="item2">

					</text>
				</view>
				<view class="text2 flex align-center justify-between">
					<text class="item1">
						6人团
					</text>
					<text class="item2">
						￥88.00
					</text>
				</view>
				
				<!-- 拼团中 -->
				<view class="thepuzzle">
					拼团中
				</view>
				
			</view>
		</view>
		
		<!-- 倒计时 -->
		<view class="time">
			
			<view class="item1">
				本团将于<text class="time-text">
					22时10分10秒
				</text>
				结束
			</view>
			<view class="item2">
				还差1人成团，赶快邀请好友加入吧！
			</view>
			<view class="item3 flex align-center justify-center">
				<view class="img relative">
					<image class="w100 h100 border50"  src="/static/test/rb.jpeg"></image>
					<text class="img-text">团长</text>
				</view>
				<view class="img">
					<image class="w100 h100 border50" src="/static/test/rb.jpeg"></image>
				</view>
				
			</view>
			
		</view>
		
		<!-- 拼团玩法 -->
		<view class="takeLaws flex align-center justify-center">
			
			<view class="laws relative flex">
				<view class="l-item">
					拼团玩法
				</view>
				
				
				<view class="item1 flex-sub flex align-center flex-direction">
					<image class="img" src="/static/homePage/bangdan-check.png"></image>
					<text class="text">
						支付开团/参团
					</text>
				</view>
				<view class="item1 flex-sub flex align-center flex-direction">
					<image class="img" src="/static/homePage/bangdan-check.png"></image>
					<text class="text">
						支付开团/参团
					</text>
				</view>
				<view class="item1 flex-sub flex align-center flex-direction">
					<image class="img" src="/static/homePage/bangdan-check.png"></image>
					<text class="text">
						支付开团/参团
					</text>
				</view>
				
			</view>
			
		</view>
		
		<!-- 猜你喜欢 -->
		<view class="good-love flex flex-wrap">
			
			<view class="g-item" v-for="(item,index) in 6" :key="index">
				<view class="g-img flex align-center justify-center">
					<image class="img" src="/static/test/rb.jpeg"></image>
				</view>
				<view class="g-text">
					<view class="text1 over-text2">
						这个是猜你喜欢商品的标题，用来测试这个表提的暂未空间是怎么样的，比如第二行占位之类的
					</view>
					<view class="text2 flex align-center justify-between">
						<text class="item1">
							￥888.00
						</text>
						<text class="item2">
							888人购买
						</text>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 底部拼团btn -->
		<view class="cu-bar tabbar bg-white shadow foot">
			<view class="group-btn flex justify-start align-center">
				
				<view class="item1 flex align-center justify-center">
					<image class="img" src="/static/homePage/bangdan-check.png"></image>
					<text class="text">
						更多拼团
					</text>
					
				</view>
				<view class="item2">
					还差1人拼团成功
				</view>
				
			</view>
		</view>
		



	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: 0, //选中下标
				tabbar: [{
						id: 1,
						name: '门店自提'
					},
					{
						id: 2,
						name: '快递配送'
					}
				]

			}
		},
		onLoad() {

		},
		methods: {
			chooseTab(index) {
				this.checked = index;
				console.log(this.checked, '===checked')
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
	}
	
	// 底部拼团btn
	.group-btn{
		width:750rpx;
		height:100rpx;
		background-color: white;
		padding:0 15rpx;
		.item1{
			width:300rpx;
			height:80rpx;
			background-color: #eee;
			border-radius: 8rpx;
			margin-right: 20rpx;
			.img{
				width: 40rpx;
				height:40rpx;
				margin-right: 16rpx;
			}
			.text{
				
			}
		}
		.item2{
			width:400rpx;
			height:80rpx;
			background: #d4237a;
			border-radius: 8rpx;
			text-align: center;
			line-height: 80rpx;
			color:white;
		}
		
	}
	
	//猜你喜欢
	.good-love{
		width:750rpx;
		padding:32rpx 5rpx;
		.g-item{
			width:330rpx;
			background-color: white;
			border-radius: 16rpx;
			margin: 20rpx;
			.g-img{
				width: 100%;
				height:240rpx;
				.img{
					width: 300rpx;
					height:200rpx;
					border-radius: 12rpx;
				}
			}
			.g-text{
				.text1{
					width:100%;
					padding:0 24rpx;
					line-height: 40rpx;
				}
				.text2{
					padding:0 24rpx;
					text{
						display: inline-block;
						line-height: 50rpx;
					}
					.item1{
						color:#d4237a;
						font-size: 30rpx;
						font-weight: bold;
					}
					.item2{
						font-size: 28rpx;
						color:#8c8e8c;
					}
				}
				
			}
			
		}
		
	}
	
	// 拼团玩法
	.takeLaws{
		width:750rpx;
		height:300rpx;
		margin-top: 16rpx;
		background-color: white;
		.laws{
			width:686rpx;
			height:200rpx;
			border-radius: 16rpx;
			border:1rpx solid #eee;
			.l-item{
				width:180rpx;
				height:60rpx;
				line-height: 60rpx;
				text-align: center;
				border:2rpx solid #eee;
				background-color: white;
				z-index:999;
				position: absolute;
				top:-30rpx;
				left:253rpx;
				font-size: 32rpx;
				color:#d4237a;
			}
			
			
			.item1{
				.img{
					width: 80rpx;
					height:80rpx;
					border-radius: 12rpx;
					margin-top: 36rpx;
				}
				.text{
					font-size: 26rpx;
					margin-top: 16rpx;
				}
			}
		}
	}
	
	// 倒计时
	.time{
		width:750rpx;
		height:320rpx;
		padding:32rpx;
		margin-top: 16rpx;
		background-color: white;
		.item1{
			width: 100%;
			height:80rpx;
			line-height: 80rpx;
			text-align: center;
			.time-text{
				font-size: 36rpx;
				color: #d4237a;
			}
		}
		.item2{
			width: 100%;
			height:80rpx;
			line-height: 80rpx;
			text-align: center;
		}
		.item3{
			width:100%;
			height:100rpx;
			.img{
				width:80rpx;
				height:80rpx;
				border-radius: 50%;
				margin:0 32rpx;
				.img-text{
					display: inline-block;
					position: absolute;
					width:80rpx;
					top:-18rpx;
					right:0;
					background: #d4237a;
					text-align: center;
					// padding:4rpx 26rpx;
					color:white;
					border-radius: 16rpx;
				}
			}
			
		}
	}

	.hot-goods {
		width: 750rpx;
		padding: 0 32rpx;
		margin-bottom: 16rpx;
		background-color: white;

		.goods-pic {
			width: 220rpx;
			height: 220rpx;

			.pic {
				width: 220rpx;
				height: 220rpx;
				border-radius: 16rpx;
			}
		}

		.goods-text {
			width: 466rpx;
			height: 260rpx;
			padding-top: 20rpx;
			padding-left: 24rpx;
			
			.thepuzzle{
				width: 120rpx;
				height:120rpx;
				border-radius: 50%;
				line-height: 120rpx;
				background: #d4237a;
				color: white;
				text-align: center;
				position: absolute;
				right:20rpx;
				bottom: 32rpx;
			}

			.text1 {
				width: 100%;
				height: 100rpx;
				line-height: 50rpx;
				font-size: 30rpx;
			}

			.text2 {
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;

				// padding:0 20rpx;
				text {
					display: inline-block;
					flex: 1;
				}

				.item1 {}

				.item2 {
					text-align: left;
					font-size: 36rpx;
					color: #fc2b25;
				}
			}

			.text3 {
				.tab-text {
					width: 80%;
					height: 60rpx;
					border: 1rpx solid #ddd;
					border-radius: 16rpx;

					.item1 {
						flex: 1;
						text-align: center;
						font-size: 24rpx;
						color: gray;
					}

					.item2 {
						width: 160rpx;
						height: 60rpx;
						background-color: pink;
						color: white;
						border-radius: 16rpx;

						.img {
							margin-left: 12rpx;
						}
					}
				}

				.icon {
					width: 60rpx;
					height: 60rpx;
					margin-left: 16rpx;
				}




			}
		}
	}


	.choose-tab {
		width: 750rpx;
		height: 116rpx;
		background-color: white;
		border-bottom: 2rpx solid #eee;
		z-index: 9999;
		line-height: 116rpx;
		text-align: center;
		color: #999999;

		.tab-item {
			position: relative;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 116rpx;
			color: #999999;
		}

		.active {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 116rpx;
			color: #DC2D20;
		}
	}
</style>
